import { Card, Row, Col,Divider } from 'antd'
import React, { useEffect, useState } from 'react'
import '../assets/Main.less'

import ReactEcharts from "echarts-for-react"

function Main() {
    const username = JSON.parse(localStorage.getItem('userInfo')).username
    const option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        toolbox: {
            feature: {
                dataView: { show: true, readOnly: false },
                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        legend: {
            data: ['Evaporation', 'Precipitation',]
        },
        xAxis: [
            {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                axisPointer: {
                    type: 'shadow'
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: 'Precipitation',
                min: 0,
                max: 250,
                interval: 50,
                axisLabel: {
                    formatter: '{value} ml'
                }
            },

        ],
        series: [
            {
                name: 'Evaporation',
                type: 'bar',
                tooltip: {
                    valueFormatter: function (value) {
                        return value + ' ml';
                    }
                },
                data: [
                    2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
                ]
            },
            {
                name: 'Precipitation',
                type: 'bar',
                tooltip: {
                    valueFormatter: function (value) {
                        return value + ' ml';
                    }
                },
                data: [
                    2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
                ]
            },

        ]
    };
    return (
        <div>
            <Card>
                <div className='top'>
                    <div className='topLeft'>
                        <div>
                            <img src="http://xawn.f3322.net:8002/distremote/static/avatar/1d22f3e41d284f50b2c8fc32e0788698.jpeg" width='80px' alt="" />
                        </div>
                        <div className='title'>
                            <div style={{ color: 'rgba(0,0,0,.65)', fontSize: '18px' }}>下午好，{username}，喝杯咖啡休息下吧☕</div>
                            <div>开发部 | 管理员</div>
                            <div>上次登录时间：2023-03-06 16:59:15</div>
                        </div>
                    </div>
                    <div className='topRight'>
                        <div className='item'>
                            <div>今日IP</div>
                            <div><span>2</span></div>
                        </div>
                        <div className='item'>
                            <div>今日访问</div>
                            <div><span>314</span></div>
                        </div>
                        <div className='item'>
                            <div>总访问量</div>
                            <div><span>4405</span></div>
                        </div>
                    </div>
                </div>

                <div className='mainList'>
                    <div className='leftItem'>
                        <ReactEcharts option={option} style={{ height: "400px", width: "600px" }} className="react_for_echarts"></ReactEcharts>
                    </div>
                    <div className='rightItem'>
                        <Card
                            title="进行中的项目"
                            extra={<a href="#">所有项目</a>}
                            style={{
                                width: 600,

                            }}
                        >
                            <Row>
                                <Col span={12}>
                                    <div className='ItemBox'>
                                        <div className='ItemBoxLeft' >F</div>
                                        <div className='ItemBoxRight'>
                                            <div>RedRabbit-Shiro</div>
                                            <span>Spring Boot 2.0.4 & Shiro1.4.0 权限管理系统。</span>
                                        </div>
                                    </div>
                                </Col>
                                <Col span={12}>
                                    <div className='ItemBox'>
                                        <div className='ItemBoxLeft' >F</div>
                                        <div className='ItemBoxRight'>
                                            <div>RedRabbit-Shiro</div>
                                            <span>Spring Boot 2.0.4 & Shiro1.4.0 权限管理系统。</span>
                                        </div>
                                    </div>
                                </Col>
                            </Row>
                            <div style={{width:'550px',height:'1px',backgroundColor:'#e8e8e8',margin:'15px auto'}}></div>
                            <Row>
                                <Col span={12}>
                                    <div className='ItemBox'>
                                        <div className='ItemBoxLeft' >F</div>
                                        <div className='ItemBoxRight'>
                                            <div>RedRabbit-Shiro</div>
                                            <span>Spring Boot 2.0.4 & Shiro1.4.0 权限管理系统。</span>
                                        </div>
                                    </div>
                                </Col>
                                <Col span={12}>
                                    <div className='ItemBox'>
                                        <div className='ItemBoxLeft' >F</div>
                                        <div className='ItemBoxRight'>
                                            <div>RedRabbit-Shiro</div>
                                            <span>Spring Boot 2.0.4 & Shiro1.4.0 权限管理系统。</span>
                                        </div>
                                    </div>
                                </Col>
                            </Row>
                            <div style={{width:'550px',height:'1px',backgroundColor:'#e8e8e8',margin:'12px auto'}}></div>
                            <Row>
                                <Col span={12}>
                                    <div className='ItemBox'>
                                        <div className='ItemBoxLeft' >F</div>
                                        <div className='ItemBoxRight'>
                                            <div>RedRabbit-Shiro</div>
                                            <span>Spring Boot 2.0.4 & Shiro1.4.0 权限管理系统。</span>
                                        </div>
                                    </div>
                                </Col>
                            </Row>
                        </Card>
                    </div>
                </div>

            </Card>
        </div>
    )
}

export default Main